博客站

一、CSS选择器概述

CSS选择器是连接HTML结构与样式表现的桥梁，通过选择器我们可以精确地定位文档中的元素并为其应用样式规则。合理使用选择器不仅能提高代码效率，还能实现更精细的页面控制。

二、基础选择器类型

1. 元素选择器（标签选择器）

/* 选择所有<p>元素 */
p {
  font-size: 16px;
  line-height: 1.5;
}

2. 类选择器（最常用）

/* 选择所有class="highlight"的元素 */
.highlight {
  background-color: yellow;
  padding: 2px 5px;
}

3. ID选择器（唯一性）

/* 选择id="main-header"的元素 */
#main-header {
  border-bottom: 2px solid #333;
}

4. 通配符选择器

/* 选择所有元素 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

三、组合选择器进阶

1. 后代选择器（空格）

/* 选择nav下的所有a元素 */
nav a {
  text-decoration: none;
  color: #0066cc;
}

2. 子选择器（>）

/* 只选择直接子元素 */
.menu > li {
  border-left: 1px solid #ddd;
}

3. 相邻兄弟选择器（+）

/* 选择紧接在h2后的第一个p元素 */
h2 + p {
  margin-top: 0;
  font-style: italic;
}

4. 通用兄弟选择器（~）

/* 选择h3后面的所有p元素 */
h3 ~ p {
  color: #666;
}

四、属性选择器

1. 基础属性选择

/* 选择有title属性的元素 */
[title] {
  cursor: help;
}

2. 精确属性值匹配

/* 选择type="submit"的input */
input[type="submit"] {
  background: #4CAF50;
}

3. 属性值模糊匹配

/* 选择href以https开头的链接 */
a[href^="https"] {
  color: green;
}

/* 选择href包含example的链接 */
a[href*="example"] {
  text-decoration: underline;
}

五、伪类与伪元素

1. 常用伪类

/* 链接状态 */
a:link { color: blue; }
a:visited { color: purple; }
a:hover { background: #f5f5f5; }

/* 表单元素 */
input:focus { outline: 2px solid orange; }
input:disabled { opacity: 0.5; }

/* 结构伪类 */
li:nth-child(odd) { background: #f9f9f9; }
tr:nth-of-type(3n) { color: red; }

2. 常用伪元素

/* 首字母样式 */
p::first-letter {
  font-size: 200%;
  float: left;
}

/* 内容前后插入 */
blockquote::before {
  content: "「";
}
blockquote::after {
  content: "」";
}

/* 选中文本样式 */
::selection {
  background: #ffeb3b;
  color: #000;
}

六、选择器最佳实践

1. 避免过度使用ID选择器

   • 不利于样式复用
   • 可能导致优先级问题

2. 合理使用类选择器

   • 命名要有语义化（如.btn-primary而非.red-button）
   • 遵循BEM等命名规范

3. 注意选择器性能

   • 避免过长的选择器链（如body div#main ul li a）
   • 浏览器解析选择器是从右向左的

4. 优先级管理技巧

   • 了解CSS优先级计算规则
   • 慎用!important
   • 使用CSS预处理器时注意嵌套深度

七、现代CSS选择器新特性

1. :is()和:where()伪类

/* 简化选择器分组 */
:is(section, article, aside) h1 {
  color: #333;
}

/* 零优先级版本 */
:where(.dark-theme, .light-theme) a {
  text-decoration: none;
}

2. :has()关系选择器

/* 选择包含img的div */
div:has(img) {
  border: 1px solid #ccc;
}

3. 焦点相关伪类

/* 焦点可见时样式 */
button:focus-visible {
  outline: 2px solid blue;
}

总结

CSS选择器是前端开发的基石，从简单的基础选择器到复杂的伪类组合，每种选择器都有其特定的应用场景。掌握这些选择器的使用技巧，可以让你：

• 更精准地控制页面样式
• 编写更高效的CSS代码
• 更好地维护大型项目样式

建议读者通过实际项目练习这些选择器，并关注CSS新特性，持续提升样式编写能力。